<script setup>
// 定义组件props
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps({
  // 是否为嵌套菜单项
  isNest: {
    type: Boolean,
    default: false,
  },
  // 当前菜单层级
  level: {
    type: Number,
    default: 0,
  },
  // 侧边栏是否折叠
  collapse: {
    type: Boolean,
    default: false,
  },
  // 菜单模式（垂直/水平）
  mode: {
    type: String,
    default: 'vertical',
  },
  // 菜单项数据对象（必须）
  item: {
    type: Object,
    required: true,
  },
  // 基础路径
  basePath: {
    type: String,
    default: '',
  },
});

// 存储只有一个子菜单时的子菜单项
const onlyOneChild = ref({});

/**
 * 检查当前菜单项是否只有一个可显示的子菜单
 * @param {Object} parent - 父菜单项
 * @returns {boolean} - 是否只有一个可显示的子菜单
 */
const hasOneShowingChild = (parent) => {
  // 过滤出需要显示的子菜单项
  const showingChildren =
    parent.children?.filter((item) => {
      if (item.meta?.hideSidebar) {
        return false; // 隐藏的子菜单不显示
      } else {
        // 临时存储当前子菜单项（如果只有一个子菜单会使用）
        onlyOneChild.value = item;
        return true;
      }
    }) ?? [];

  // 当只有一个子菜单时，直接显示该子菜单
  if (showingChildren.length === 1) {
    return true;
  }

  // 如果没有子菜单需要显示，则显示父菜单本身
  if (showingChildren.length === 0) {
    onlyOneChild.value = {
      ...parent,
      path: '',
      noShowingChildren: true, // 标记没有可显示的子菜单
    };
    return true;
  }

  return false;
};
</script>

<template>
  <!-- 如果菜单项没有设置隐藏，则渲染 -->
  <div v-if="!item.meta?.hideSidebar">
    <!-- 当只有一个子菜单且不需要总是显示父菜单时 -->
    <template
      v-if="hasOneShowingChild(item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)"
    >
      <!-- 添加工具提示（仅在顶层且折叠时显示） -->
      <el-tooltip
        class="box-item"
        :disabled="level > 0 || !collapse"
        :content="item.path"
        placement="right"
      >
        <!-- 菜单项 -->
        <el-menu-item
          :index="item.path"
          :class="{
            'submenu-title-no-dropdown': !isNest,
            'one-level-menu-item': level === 0,
          }"
        >
          <Item
            class-name="menu-item-svg"
            :title="item.path"
            :collapse="level === 0 && collapse"
            :mode="mode"
          />
        </el-menu-item>
      </el-tooltip>
    </template>

    <!-- 当有多个子菜单时 -->
    <el-sub-menu
      v-else
      :index="item.path"
      :class="{ 'one-level-sub-menu': level === 0 }"
      teleported
    >
      <!-- 子菜单标题 -->
      <template #title>
        <Item
          v-if="item.meta"
          class-name="sub-menu-svg"
          :title="item.path"
          :collapse="level === 0 && collapse"
          :mode="mode"
        />
      </template>

      <!-- 递归渲染子菜单 -->
      <sidebar-item
        v-for="(child, index) in item.children"
        :key="child.path + index"
        :is-nest="true"
        :item="child"
        :base-path="child.path"
        class="nest-menu"
        :level="level + 1"
        :collapse="collapse"
      />
    </el-sub-menu>
  </div>
</template>
